<template>
  <div class="exchangeRecord">
    <header_ title="兑换记录" :pathName="this.$store.state" background='#18235b' color='#ffffff' image_='1' size='4.8vw' />
    <!-- <div class="exchange_title">兑换记录</div> -->
    <div :class="index=='0'?'exreco exreco_':'exreco'" v-for="(item, index) in infoList" :key="index">
      <div class="image_header">
        <div>
          <img :src="item.icon" alt="" />
        </div>
        <div class="title_name">
          <span>{{ item.name }}</span>
          <span>{{ item.create_time }}</span>
        </div>
      </div>
      <div class="title_image">
        <span>-{{ item.need_gold }}</span>
        <img v-if="item.type == '1'" src="../../public/img/dressUpExchange/zuanban.png" alt="" />
        <img v-else src="../../public/img/dressUpExchange/gift.png" alt="" />
      </div>
    </div>
    <!-- <li v-if="loading_" @click="homePage">点击加载更多</li> -->
  </div>
</template>

<script>
  import header_ from '../../components/header_'
  import {
    Toast
  } from "vant";
  export default {
    data() {
      return {
        loading_: true,
        infoList: [],
        page: 0, //页数
      };
    },
    created() {
      this.homePage();
      var u = navigator.userAgent;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      console.log(isiOS);
      if (isiOS) {
        if (window.webkit) {
           window.webkit.messageHandlers.setStatusBarTheme.postMessage({
            setStatusBarTheme: 1
          });
        }
      } else {
       app.setStatusBarTheme(1)
      }
    },
    components: {
      header_
    },
    methods: {
      homePage() {
        // this.page += 1;
        let arys = {
          // roomId: "260",
          // page: this.page,
        }; //参数
        let url = "/lottery/exchangelist";
        this.$.encryption2(arys, url).then((res) => {
          console.log(res);
          if (res.data.status === 0) {
            this.infoList = res.data.result;
          }
          // if (!res.data.result.length) {
          //    this.loading_=false
          //   Toast("暂无数据");
          // } else {
          //   this.infoList = this.infoList.concat(res.data.result);
          // }
        });
      },
    },
  };
</script>
<style scoped>
  .exchange_title {
    margin-top: 14vw;
    width: 100vw;
    height: 8vw;
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 4.8vw;
    color: #ffffff;
  }

  .title_image>img {
    width: 4.2vw;
    height: 4.8vw;
    padding-left: 1vw;
  }

  .title_image>span {
    font-size: 5.1vw;
    font-family: MicrosoftYaHeiSemibold;
    color: #ffffff;
  }

  .title_image {
    display: flex;
    height: 12vw;
    align-items: center;
  }

  .title_name>span:nth-of-type(1) {
    font-size: 3.86vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #d7d8f8;
  }

  .title_name>span:nth-of-type(2) {
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(144, 146, 186, 0.8);
  }

  .image_header>div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: end;
    height: 12vw;
    margin-left: 2vw;
  }

  .image_header>div:nth-of-type(1)>img {
    width: 88%;
    height: 88%;
  }

  .image_header>div:nth-of-type(1) {
    width: 12vw;
    height: 12vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg,
        rgba(30, 14, 159, 0.5) 0%,
        rgba(3, 3, 3, 0.5) 100%);
    box-shadow: 0px 0px 20px 2px rgba(134, 199, 255, 0.18);
    border-radius: 1vw;
  }

  .image_header {
    display: flex;
  }

  .exreco {
    width: 90vw;
    height: 12vw;
    margin: 4.8vw auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .exchangeRecord {
    width: 100vw;
    height: 100vh;
    background: #18235b;
    overflow-y: scroll;
    /* background: url('../../public/img/dressUpExchange/di.jpg')
    no-repeat; */
    /* background-size: 100%; */
  }

  li {
    text-align: center;
    height: 5vw;
    line-height: 5vw;
    font-size: 2.4vw;
    color: #ffffff;
  }

  .exreco_ {
    margin-top: 22.6vw !important;
  }
</style>